<template>
  <div class="line">
    <h1>11ß</h1>
    <div id="container"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import rawData from './dataG6Two.js'
const { Util, registerBehavior, registerEdge, registerNode } = G6

export default {
  name: 'app-line1',
  data() {
    return {
      dataL: {
        nodes: [
          {
            id: '0',
            label: 'A',
            cluster: 'part1',
            // x: 100,
            // y: 100,
          },
          {
            id: '1',
            label: 'B',
            cluster: 'part1',
            // x: 150,
            // y: 150,
          },
          {
            id: '2',
            label: 'C',
            cluster: 'part1',
            // x: 200,
            // y: 200,
          },
          {
            id: '3',
            label: 'D',
            cluster: 'part1',
            x: 250,
            y: 250,
          },
          {
            id: '4',
            label: 'E',
            cluster: 'part1',
            // x: 300,
            // y: 300,
          },
          {
            id: '5',
            label: 'F',
            cluster: 'part1',
            // x: 350,
            // y: 350,
          },
          {
            id: '6',
            label: 'a',
            cluster: 'part2',
            // x: 400,
            // y: 400,
          },
          {
            id: '7',
            label: 'b',
            cluster: 'part2',
            // x: 450,
            // y: 450,
          },
          {
            id: '8',
            label: 'c',
            cluster: 'part2',
            // x: 500,
            // y: 500,
          },
          {
            id: '9',
            label: 'd',
            cluster: 'part2',
            // x: 550,
            // y: 550,
          },
        ],
        edges: [
          {
            source: '0',
            target: '6',
          },
          {
            source: '0',
            target: '7',
          },
          {
            source: '0',
            target: '9',
          },
          {
            source: '1',
            target: '6',
          },
          {
            source: '1',
            target: '9',
          },
          {
            source: '1',
            target: '7',
          },
          {
            source: '2',
            target: '8',
          },
          {
            source: '2',
            target: '9',
          },
          {
            source: '2',
            target: '6',
          },
          {
            source: '3',
            target: '8',
          },
          {
            source: '4',
            target: '6',
          },
          {
            source: '4',
            target: '7',
          },
          {
            source: '5',
            target: '9',
          },
        ],
      },
    }
  },
  created() {},
  mounted() {
    this.initG6()
  },
  methods: {
    //  业务数据拓扑图
    initG6() {
      G6.registerLayout('dagress', {
        execute() {
          const self = this
          let top = 100
          let left = 100

          const { nodes, edges } = self
          nodes.forEach((element) => {
            top += 20
            left += 20
            element.x = top
            element.y = left
          })
        },
      })
      const container = document.getElementById('container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500
      const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        layout: {
          type: 'dagress',
          // nodesepFunc: (d) => {
          //   if (d.id === '3') {
          //     return 500
          //   }
          //   return 50
          // },
          // ranksep: 70,
          // controlPoints: true,
        },
        animate: true,
        defaultNode: {
          size: 20,
          style: {
            fill: '#C6E5FF',
            stroke: '#5B8FF9',
          },
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
        },
        modes: {
          default: ['drag-canvas'],
        },
      })
      graph.data(this.dataL)
      graph.render()

      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
    },
  },
}
</script>
<style lang="less" scoped>
.line {
  width: 100%;
  height: 100%;
}
</style>
